<template>
  <div style="height: 100%">
    <navbar :title="$route.query.title"></navbar>
    <div class="content-noBottom">
      <div class="img-container">
        <img :src="appUrl + specialData.ksImg" alt=""/>
        <div class="img-title">
               <span class="desc-container">
                     <van-icon  size="18" name="eye-o" color="#FFF"/>
                     <span >{{specialData.viewsCount || 0}}</span>
                   </span>
          <span class="desc-container" @click="operationCollect()">
                     <van-icon  size="18" name="star-o" :style="{color: (specialData.isCollect === 1  ? '#1da1f2':'#FFF')}"/>
                     <span :style="{color: (specialData.isCollect === 1  ? '#1da1f2':'#FFF')}">{{specialData.collectCount || 0 }}</span>
                   </span>
        </div>
      </div>
        <van-tabs v-model="active">
            <van-tab :title="$t('special_topic_introduction')" name="desc">
                <div class="ks-desc" v-html="specialData.ksDesc"></div>
            </van-tab>
            <van-tab :title="$t('special_topic_content')" name="content">
                <div class="list-container" >
                    <template v-if="specialList.length > 0">
                        <div v-for="(v,i) in specialList" :key="i" >
                            <h2>{{v.kslName}}</h2>
                            <div class="list-item-container">
                                <div v-for="(item,index) in v.courses" :key="index" class="list-items" @click="jumpSpecial(item)">
                                    <img :src="appUrl + item.itmIcon" alt="">
                                    <p>{{item.itmTitle}}</p>
                                    <div class="list-items-desc">
                    <span class="desc-container">
                      <van-icon name="eye-o" color="#9a9a9a"/>
                      <span >{{item.accessCount || 0}}</span>
                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </van-tab>
        </van-tabs>
      <!--详情-->
<!--      <div class="detail-container">-->
<!--        <div>-->
<!--          <span class="detail-title">{{$t('mod_desc')}}：</span>-->
<!--          <span style="margin-top: 2px">{{specialData.ksDesc}}</span>-->
<!--        </div>-->
<!--      </div>-->
      <!--列表-->
<!--      <div class="list-container" >-->
<!--        <template v-if="specialList.length > 0">-->
<!--          <div v-for="(v,i) in specialList" :key="i" >-->
<!--            <h2>{{v.kslName}}</h2>-->
<!--            <div class="list-item-container">-->
<!--              <div v-for="(item,index) in v.courses" :key="index" class="list-items" @click="jumpSpecial(item)">-->
<!--                <img :src="appUrl + item.itmIcon" alt="">-->
<!--                <p>{{item.itmTitle}}</p>-->
<!--                <div class="list-items-desc">-->
<!--                    <span class="desc-container">-->
<!--                      <van-icon name="eye-o" color="#9a9a9a"/>-->
<!--                      <span >{{item.accessCount || 0}}</span>-->
<!--                    </span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
<!--      </div>-->
    </div>
    <common-loading :isLoading="isLoading"></common-loading>
  </div>
</template>

<script>
import { Icon, Tab, Tabs } from 'vant';
export default {
    name: 'detail',
    components: { [Icon.name]: Icon, vanTabs: Tabs, vanTab: Tab },
    data() {
        return {
            specialData: {},
            isLoading: false,
            specialList: [], //数据详情
            isCollect: false,
            hascollect: true,
            active: 'desc'
        };
    },
    methods: {
        getSpecialData() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/knowledge-subject/${this.$route.query.id}`
            }).then(res => {
                if (res && res.status === 200) {
                    this.specialData = res.data;
                    this.specialList = res.data.lables;
                }
                this.isLoading = false;
            });
        },
        //跳转网址
        jumpSpecial(item) {
            if (item.itmType && item.itmType === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${item.kscoItmId}`});
            } else if (item.itmType === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: item.kscoItmId, title: item.itmTitle}});
            } else if (item.itmType === 'SELFSTUDY') { // 网上课程
                this.$router.push({path: `/course/${item.kscoItmId}/0`});
            } else if (item.itmType === 'CLASSROOM') { // 培训项目
                this.$router.push({path: `/certifiedCourse/${item.kscoItmId}/0`});
            } else {
                this.$router.push({path: `/course/${item.kscoItmId}/0`});
            }
        },
        //收藏
        operationCollect() {
            if (this.hascollect) {
                this.hascollect = false;
                let flag = this.specialData.isCollect;
                let method = 'POST';
                if (flag) {
                    method = 'DELETE';
                }
                this.$axios({
                    method: method,
                    url: `/app/api/collect`,
                    params: {
                        targetId: this.specialData.ksId,
                        module: 'SUBJECT'
                    }
                }).then(() => {
                    if (flag === 1) {
                        this.specialData.isCollect = 0;
                        this.specialData.collectCount = this.specialData.collectCount - 1;
                    } else {
                        this.specialData.isCollect = 1;
                        this.specialData.collectCount = this.specialData.collectCount + 1;
                    }
                    this.hascollect = true;
                });
            }
        }
    },
    mounted() {
        this.getSpecialData();
    }
};
</script>

<style scoped lang="less">
  .img-container{
    width: 100%;
    height: 150px;
    background: #c9c9c9;
    position: relative;
    img{
      width: 100%;
      min-width: 100%;
      height: 100%;
    }
    .img-title{
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: absolute;
      bottom: -0.5%;
      background-color: #33333380;
      color: #ffffff;
      line-height: 26px;
      .desc-container{
        display: flex;
        align-items: center;
        margin: 0 25px;
        span{
          color: #FFF;
          font-size: 14px;
          margin-left: 5px
        }
      }
    }
  }
  .detail-container{
    min-height: max-content;
    background-color: #ffffff;
    width: 100%;
    padding: 10px;
    .detail-title{
      font-size: 14px;
      font-weight: bold
    }
  }
  .list-container{
    margin-top: 5px;
    height: max-content;
    min-height: 62%;
    width: 100%;
    padding: 10px 10px;
    background-color: #fff;
    h2::before{
      content: '';
      width: 5px;
      height: 15px;
      border-radius: 10px;
      display: inline-block;
      background-color: #003764;
      margin-right: 11px;
      margin-bottom: -2px;
    }
    h2{
      font-size: 16px;
      font-weight: bold
    }
    .list-item-container{
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      .list-items{
        border: 1px solid #f3f3f3;
        width: 41.5%;
        height: 120px;
        background-color: #fff;
        margin: 2.5%;
        padding-bottom: 10px;
        &:nth-child(2n){
          margin-right: 0;
        }
        img{
          width: 100%;
          height: 62%;
          min-width: 100%;
          min-height: 62%;
          background-color: #c9c9c9;
        }
        p{
          font-size: 12px;
          padding: 5px;
        }
        .list-items-desc{
          display: flex;
          justify-content: space-between;
          margin-top: 5%;
          margin-left: 5px;
          margin-right: 5px;
          .desc-container{
            display: flex;
            align-items: center;
            span{
              color: #9a9a9a;
              font-size: 12px;
              margin-left: 5px
            }
          }
        }
      }
    }
  }
  .ks-desc{
    background-color: #ffffff;
    padding: 10px 10px;
    margin-top: 5px;
    /deep/ p {
      max-width: 100% !important;
    }
    /deep/img{
      max-width: 100% !important;
      height: auto;
    }
  }
</style>
